<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">

    <body>

        <ui:composition template="./MainTemplate.xhtml">

            <ui:define name="title">
                Listing Page
            </ui:define>

            <ui:define name="head">
                <script type="text/javascript">
                    ( function($) {
                        // Make tab item 'Listing' on menu is active
                        $(document).ready( function() { 
                            $('#listing').addClass("active"); 
                        });
                    }) ( jQuery );
                </script>
                <style type="text/css">
                    .text_white2 {
                        color: #FFFFFF;
                        font-family: Tahoma;
                        font-size: 12px;
                        font-weight: bold;
                        padding-top: 1px;
                        text-decoration: none;
                    }
                    .list-tcat{
                        background: url('img/free_listing.png') transparent no-repeat;
                    }
                    .list-tcat span{
                        margin-left: 60px;
                    }
                    .list-company{
                        margin-bottom: 7px;
                        border: 1px solid #D6D7D7;
                        position: relative;
                    }
                    .list-company th{
                        font-weight: bold;
                        text-align: left;
                    }
                </style>
            </ui:define>

            <ui:define name="left">
                <h:form id="form-company">
                    <fieldset>
                        <legend><h1 class="title">Search Company</h1></legend>
                        <h:panelGrid columns="3">
                            <p:inputText id="keyword" value="#{companyController.keyword}" style="height: 22px"/>
                            <p:selectOneMenu id="type" value="#{companyController.findWhere}" style="width: 150px">
                                <f:selectItem itemLabel="Company Name" itemValue="Name" /> 
                                <f:selectItem itemLabel="Contact Person" itemValue="ContactPerson" /> 
                                <f:selectItem itemLabel="Designation" itemValue="Designation" /> 
                                <f:selectItem itemLabel="Address" itemValue="Address" /> 
                                <f:selectItem itemLabel="City" itemValue="City" /> 
                                <f:selectItem itemLabel="Fax" itemValue="Fax" />
                                <f:selectItem itemLabel="Mobile" itemValue="Mobile" /> 
                                <f:selectItem itemLabel="Telephone" itemValue="Telephone" /> 
                            </p:selectOneMenu>
                            <p:commandButton icon="ui-icon-search" update="list" value="Advance Search" 
                                             style="height: 26px" actionListener="#{companyController.advanceSearch}"/>   
                        </h:panelGrid>
                        <h4 style="text-align: justify">Website provides listing of RadioCabs Company from all over Vietnam. You can find complete information on Radio Taxi companies offering Radio Cabs Services, who serve in your city facilitating you with quality &amp; efficient travel services which they offer.
                            <br/><br/>If you want to be listed here, please filling <a href="RegisterCompany.xhtml">Registration Form</a>.</h4>
                    </fieldset>
                    <fieldset>
                        <legend><h1 class="title">Company List</h1></legend>
                        <h:panelGrid id="list" columns="1" cellpadding="10" cellspacing="" style="width: 100%" >
                            <ui:repeat value="#{companyController.paginator.model}" var="c" >
                                <table width="100%" cellspacing="0" cellpadding="0" border="0" class="list-tcat">
                                    <tbody>
                                        <tr>
                                            <td width="32%" style="padding-right:12px;">
                                                <span class="text_white2">Company</span>
                                            </td>
                                            <td align="right" width="73%"></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table width="100%" cellspacing="5" cellpadding="0" bgcolor="#efefef" border="0" class="list-company">
                                    <tbody>
                                        <tr>
                                            <th width="23%">Company Name </th>
                                            <td width="5%">:</td>
                                            <td width="72%">#{c.name}</td>
                                        </tr>
                                        <tr>
                                            <th>ContactPerson</th>
                                            <td>:</td>
                                            <td>#{c.contactPerson}</td>
                                        </tr>
                                        <tr>
                                            <th>Designation</th>
                                            <td>:</td>
                                            <td>#{c.designation}</td>
                                        </tr>
                                        <tr>
                                            <th>Address</th>
                                            <td>:</td>
                                            <td>#{c.address}</td>
                                        </tr>
                                        <tr>
                                            <th>Fax </th>
                                            <td>:</td>
                                            <td>#{c.fax}</td>
                                        </tr>
                                        <tr>
                                            <th>Mobile</th>
                                            <td>:</td>
                                            <td>#{c.mobile}</td>
                                        </tr>
                                        <tr>
                                            <th>Telephone</th>
                                            <td>:</td>
                                            <td>#{c.telephone}</td>
                                        </tr>
                                        <tr>
                                            <th>MemberType</th>
                                            <td>:</td>
                                            <td>#{c.memberType}
                                                <p:commandButton value="Enquiry" styleClass="button-add"
                                                                 actionListener="#{enquiryController.enquiryCompany(c.id)}" style="position: absolute;bottom: 7px;right:5px;"/>
                                            </td>
                                        </tr>
                                    </tbody>                                
                                </table>
                            </ui:repeat>
                            <p:panel id="page" style="border: 0px;text-align: center">   
                                <p:commandButton update="list" icon="ui-icon-circle-triangle-w" 
                                                 actionListener="#{companyController.paginator.prev}"/>
                                <h:outputText value=" #{companyController.paginator.pageIndex} / #{companyController.paginator.pages}  &nbsp;" 
                                              style="font-weight: bold;font-size: 14px"/>
                                <p:commandButton update="list" icon="ui-icon-circle-triangle-e" 
                                                 actionListener="#{companyController.paginator.next}"/>
                                <h:inputHidden value="#{companyController.paginator.pageIndex}"/>
                            </p:panel>
                        </h:panelGrid>
                    </fieldset>
                </h:form>
            </ui:define>

            <ui:define name="right">
            </ui:define>

        </ui:composition>

    </body>
</html>
